<template>
    <div class="options">
        <time-selector v-model:period-string="periodString" :options="options"/>
        <button class="switch" @click="switchChart">{{ buttonTitle }}</button>
    </div>
    <budget-bar-chart :bar-chart-data="barChartData" v-if="state"/>
    <budget-line-chart :line-chart-data="lineChartData" v-if="!state"/>
</template>

<script setup lang="ts">
import { ref,  computed,   watch, watchEffect, reactive } from 'vue'
import TimeSelector from '@/components/timeSelector/index.vue'
import getPeriod from '@/utils/getPeriod'
import { getDetailedIncome } from '@/api/income';
import { Period } from '@/types/config';
import { getDetailedExpense } from '@/api/expense';
import moment from 'moment';
import BudgetBarChart from './budgetBarChart/index.vue'
import BudgetLineChart from './budgetLineChart/index.vue'

let periodString = ref('本月')
const options = ['本月', '上月', '今年', '去年']
let period = reactive<Period>({
    begin:moment().startOf('month').format('YYYY-MM-DD'),
    end:moment().subtract(-1, 'month').startOf('month').format('YYYY-MM-DD')
})
let state = ref(true)
watch(periodString, () => {
    const time = getPeriod(periodString.value)
    period.begin = time.begin
    period.end = time.end
})
let barChartData = ref({
    type: ['Profit', 'Expenses', 'Income'],
    income: [320, 302, 341, 374, 390, 450, 420],
    expenses: [-120, -132, -101, -134, -190, -230, -210],
    date: [1,2,3,4,5,6,7]
})


watchEffect(async () => {
    // 当barchartdata更新，图表需要对应更新，为了让数据只更新一次，且是在income、expense和date都更新后再进行更新，
    //所以要严格控制三个数据的更新顺序，然后给最后一个数据设置监听器
    const incomeReulst =  await getDetailedIncome(period)
    barChartData.value.income = incomeReulst.data
    barChartData.value.date=[]
    for(let i=1;i<=barChartData.value.income.length;i++){
        barChartData.value.date.push(i)
    }
    const expenseResult = await getDetailedExpense(period)
    barChartData.value.expenses = []
    expenseResult.data.forEach((element:number) => {
    barChartData.value.expenses.push(-element)
    })
})

let buttonTitle = computed(() => {
    return state.value ? '切换折线图' : '切换柱状图'
})
let profit = computed(() => {
    return barChartData.value.income.map((item, index) => {
        return item + barChartData.value.expenses[index]
    })
})
let totalProfit = computed(() => {
    let currentTotalProfit = 0
    let total: number[] = []
    profit.value.forEach((onePeriodProfit, index) => {
        total[index] = onePeriodProfit + currentTotalProfit
        currentTotalProfit = total[index]
    })
    return total
})

let lineChartData = computed(() => {
    const date = barChartData.value.date
    const amount = totalProfit.value
    return {
        date,
        amount
    }
})

const switchChart = () => {
    state.value = !state.value
}

</script>

<style scoped lang="scss">


.options {
    display: flex;

    .time-selector {
        height: 6%;
        width: 120px;
        margin-top: 5px;
        margin-left: 20px;
    }

    .switch {
        width: 120px;
        height: 32px;
        margin: 5px 20px;
        color: rgb(102, 102, 102);
        border: 1px solid rgb(183, 183, 183);
        border-radius: 4px;
        cursor: pointer;
    }

    .switch:hover {
        color: rgb(3, 61, 176);
    }

}

.analyse {
    position: fixed;
    right: 20px;
    top: 69px;
    width: 200px;
    height: 100px;
    padding: 5px;
    border: 2px solid rgb(220, 220, 220);
    border-radius: 5px;

    .tip {
        color: rgb(0, 213, 255);
    }

    .analyse-text {
        padding: 0 10px;
        color: rgb(134, 134, 134);
    }
}
</style>